<template>
    <!--注册页面-->
    <div class="wrap">
        <loginHeader></loginHeader>
        <div class="content">
            <!--logo部分-->
            <div class="logo">
                <img class="logo" src="../../assets/img/login/LoginLOGO.png" alt="">
                <p class="headerTxt">用户注册</p>
            </div>
            <div>
                <!------------------------------------步骤集合List-->
                <div class="conList">
                    <div :class="index > 0? 'conListDivBorder': ''"><span :class="index > 0? 'conListNumS conListNum': 'conListNum'">1</span><span :class="index > 0? 'conListTxtS conListTxt': 'conListTxt'">绑定手机号</span></div>
                    <div :class="{conListDivBorder : index > 1}"><span :class="index > 1? 'conListNumS conListNum': 'conListNum'">2</span><span :class="index > 1? 'conListTxtS conListTxt': 'conListTxt'">填写账号信息</span></div>
                    <div :class="{conListDivBorder : index > 2}"><span :class="index > 2? 'conListNumS conListNum': 'conListNum'">3</span><span :class="index > 2? 'conListTxtS conListTxt': 'conListTxt'">设置支付方式</span></div>
                    <div :class="{conListDivBorder : index > 3}"><span :class="index > 3? 'conListNumS conListNum': 'conListNum'">√</span><span :class="index > 3? 'conListTxtS conListTxt': 'conListTxt'">注册成功</span></div>
                </div>
                <!---------------------------------------------------------------第一步,绑定手机号-->
                <div class="steps stepsOne" v-if="index == 1">
                    <div class="OnePhone">
                        <span>手机号</span>
                        <input type="text" ref="OneMobilePhone" id="OneMobilePhone"  oninput = "value=value.replace(/[^\d]/g,'')" @focus="focus" @blur="blur"/>
                        <!--icon图标  class名错误(el-icon-error)正确(el-icon-success)-->
                        <i :class="icon? iconClass: ''" style="margin-left: 10px;"></i>
                    </div>
                    <div class="OneCode">
                        <span>验证码</span>
                        <input ref="OneMobileCode" id="OneMobileCode"  type="text">
                        <!----------------------------------------------------------------------------------获取验证码-->
                        <p @click="getCode">{{CodeText}}</p>
                    </div>
                    <div class="toTwo" @click="toTwo">下一步</div>
                </div>
                <!--------------------------------------------------------------第二步,填写账号信息-->
                <div class="steps stepsTwo" v-if="index == 2">
                    <!--第二步左边-->
                    <div class="TwoLeft">
                        <p class="TwoDiv TwoOne" style="font-weight: 600;">登录名</p>
                        <p class="TwoDiv TwoTwo" style="font-weight: 600;">请设置登录密码</p>
                        <p class="TwoDiv TwoThree">登录密码</p>
                        <p class="TwoDiv TwoFour">确定密码</p>
                        <p class="TwoDiv TwoFive">设置会员名</p>
                        <p class="TwoDiv TwoSix">会员名</p>
                    </div>
                    <!--第二步右边-->
                    <div class="TwoRight">
                        <p class="TwoDiv TwoOne">13346789228</p>
                        <p class="TwoDiv TwoTwo">登录时验证，保护账号信息</p>
                        <div class="TwoDiv TwoThree"><input ref="TwoPasswordA" id="TwoPasswordA" type="password"placeholder="设置您的登录密码"></div>
                        <div class="TwoDiv TwoFour"><input ref="TwoPasswordB" id="TwoPasswordB" @input="TwoPasswordBlur" type="password" placeholder="请再次输入您的密码"></div>
                        <div class="TwoDiv TwoFive"></div>
                        <div class="TwoDiv TwoSix"><input ref="RegisterTwoName" id="RegisterTwoName" type="text" placeholder="会员名一旦设置成功，无法修改"></div>
                        <p class="TwoSub" @click="toThree">提交</p>
                        <p :id="isTwoPassword?'TwoPasswordHintN':'TwoPasswordHintB'">两次输入密码不一致</p>
                    </div>
                </div>
                <!--------------------------------------------------------------第三步,设置支付方式-->
                <div class="steps stepsThree" v-if="index == 3">
                    <div style="display: none;">
                        <input type="password">
                        <input type="password">
                        <input type="password">
                        <input type="text">
                        <input type="text">
                    </div>
                    <!--第三步左边-->
                    <div class="ThreeLeft">
                        <p class="ThreeP"  style="font-weight: 400;">银行卡号</p>
                        <p class="ThreeP">持卡人姓名</p>
                        <p class="ThreeP">身份证号</p>
                        <p class="ThreeP">手机号码</p>
                        <p class="ThreeP">验证码</p>
                    </div>
                    <!--第三步左边-->
                    <div class="ThreeRight">
                        <div class="ThreeDiv"><input ref="ThreeBankNumber" id="ThreeBankNumber" type="text" oninput = "value=value.replace(/[^\d]/g,'')"></div>
                        <div class="ThreeDiv"><input ref="ThreeBankName" id="ThreeBankName" type="text"></div>
                        <div class="ThreeDiv"><input ref="ThreeIdNumber" id="ThreeIdNumber" type="text"></div>
                        <div class="ThreeDiv"><input ref="ThreeMobile" id="ThreeMobile" type="text" oninput = "value=value.replace(/[^\d]/g,'')" placeholder="此卡在银行预留手机号"></div>
                        <div class="ThreeDiv"><input class="ThreeCode" id="ThreeCode" type="text"><span>获取验证码</span></div>
                        <div class="toFour">同意协议并确定</div>
                        <div class="agreeTxt" @click="showThreeAgreeTxt"><span>查看</span><span>《快捷支付服务相关协议》</span></div>
                        <div :id="isThreeAgreeTxt?'ThreeAgreeTxtB':'ThreeAgreeTxtN'">
                            <p class="ThreeAgreeTxtTop">快捷支付服务相关协议</p>
                            <div class="ThreeAgreeTxtContentWrap">
                                <div class="ThreeAgreeTxtContent">
                                    协议内容
                                </div>
                            </div>
                            <p class="ThreeAgreeTxtBottom">
                                <span @click="hideThreeAgreeTxt">确 定</span>
                            </p>
                        </div>
                    </div>
                </div>
                <!------------------------------------------------------------------第四步,注册成功-->
                <div class="steps stepsFour" v-if="index == 4">
                    <div class="FourDiv">
                        <div class="FourOne right FourDivDiv">恭喜注册成功，你的账户为：</div>
                        <p class="FourTwo right FourDivDiv"><span>登录名：</span><span style="color: #EF3015;">133333333</span></p>
                        <p class="FourThree right FourDivDiv">银行卡：浦发银行（尾号2360）已开通快捷支付</p>
                        <p class="FourFour right FourDivDiv">会员名：236</p>
                    </div>
                </div>
            </div>
        </div>
        <loginFooter></loginFooter>
    </div>
</template>

<script>
    import  loginHeader  from "./LoginHeader";
    import  loginFooter  from "./LoginFooter";
    export default {
        name: "register",
        components:{
            loginHeader,
            loginFooter
        },
        data(){
            return {
                // 存储数据,第一步数据
                RegisterOne:{
                    "RegisterMobile":"",
                    "RegisterCode":""
                },
                // 存储数据,第二步数据
                RegisterTwo:{
                    "RegisterTwoPassword":"",
                    "RegisterTwoName":""
                },
                // 存储数据,第三步数据
                RegisterThree:{
                    "ThreeBankNumber":"",
                    "ThreeBankName":"",
                    "ThreeIdNumber":"",
                    "ThreeMobile":"",
                    "ThreeCode":""
                },
                // 当前所在步骤
                index: 1,
                // -------------------------------绑定手机号步骤一data值
                // 第一步,判断手机号格式是否正确
                isMobile: false,
                //是否显示输入框后面的icon
                icon:false,
                // 手机号输入框后面icon的class
                iconClass:'el-icon-success colorGreen',
                CodeText: "免费获取验证码",
                // 获取手机验证码倒计时是否为0
                isZero: false,
                // -------------------------------绑定手机号步骤二data值
                // 判断提示两次输入密码是否一致
                isTwoPassword:true,
                // -------------------------------绑定手机号步骤三data值
                // 判断协议框是否显示
                isThreeAgreeTxt:false,
            }
        },
        methods:{
            // ---------------------------------------------------------------------------------------------第一步事件
            // 手机号输入框获取焦点
            focus(){
                this.icon = false;
            },
            // 手机号input框失去焦点
            blur(){
                this.icon = true;
                // -------------------------------------------手机号输入框不为空
                if(this.$refs.OneMobilePhone.value != ''){
                    // 判断手机号是否为真
                    this.isMobile = this.global.mobleVerify(this.$refs.OneMobilePhone.value);
                    if(this.isMobile){
                        //手机号格式对
                        this.iconClass = "el-icon-success colorGreen";
                    }else{
                        //手机号格式不对
                        this.iconClass = "el-icon-error colorRed";
                    }
                }else{
                    //------------------------------------------手机号输入框为空
                    this.iconClass = "el-icon-error colorRed";
                }
            },
            // 获取验证码
            getCode(){
                console.log(this.isMobile, this.$refs.OneMobilePhone.value);
                if(this.isMobile){
                    // 本地存储手机号
                    this.RegisterOne.RegisterMobile = this.$refs.OneMobilePhone.value;
                    // 如果手机号格式正确,获取验证码,倒计时
                    this.$message.closeAll();
                    this.$message({
                        message: '发送验证码成功!请注意查收',
                        type: 'success'
                    });
                    var num = 60;
                    if(this.isZero){
                        return;
                    }
                    this.isZero = true;
                    num = num - 1;
                    this.CodeText = "重发验证码（" + num + "s）";
                    var getCode = setInterval(()=>{
                        if(num == 1){
                            this.isZero = false;
                            clearInterval(getCode);
                            this.CodeText = "免费获取验证码";
                            return;
                        }
                        num = num - 1;
                        this.CodeText = "重发验证码（" + num + "s）";
                    },1000)
                }else{
                    this.$message.closeAll();
                    this.$message.error('您输入的手机号格式有误,请重新输入');
                }
            },
            // 进入第二步
            toTwo(){
                // 验证手机验证码
                if(true){
                    // 本地存储手机验证码
                    this.RegisterOne.RegisterCode = "11324";
                    // 本地存储第一步数据(过期时间5分钟)
                    localStorage.setExpire("RegisterOne",JSON.stringify(this.RegisterOne),1000*60*5);
                    this.index = 2;
                }else{
                    this.$message.closeAll();
                    this.$message.error('您输入的验证码有误,请重新输入');
                }
            },
            // -------------------------------------------------------------------------------------------第二步事件
            // 第二次输入密码输入框change事件:判断两次输入密码是否一致
            TwoPasswordBlur(){
                console.log(this.$refs.TwoPasswordA.value);
                if(this.$refs.TwoPasswordA.value != this.$refs.TwoPasswordB.value){
                    this.isTwoPassword = false;
                }else{
                    this.isTwoPassword = true;
                }

            },
            // 进入第三步
            toThree(){
                if(this.$refs.TwoPasswordA.value==""||this.$refs.TwoPasswordB.value==""||this.$refs.RegisterTwoName.value==""){
                    this.$message.closeAll();
                    this.$message.error('请把数据填写完整!');
                    return;
                }
                if(this.$refs.TwoPasswordA.value != this.$refs.TwoPasswordB.value){
                    this.$message.closeAll();
                    this.$message.error('两次密码输入不一致!');
                    return;
                }
                this.RegisterTwo.RegisterTwoPassword = this.$refs.TwoPasswordB.value;
                this.RegisterTwo.RegisterTwoName = this.$refs.RegisterTwoName.value;
                // 本地存储第二步数据(过期时间5分钟)
                localStorage.setExpire("RegisterTwo",JSON.stringify(this.RegisterTwo),1000*60*5);
                this.index = 3;
                this.reload();
            },
            // -------------------------------------------------------------------------------------------第三步事件
            // 点击查看显示协议
            showThreeAgreeTxt(){
                this.isThreeAgreeTxt = true;
            },
            // 点击确定隐藏协议
            hideThreeAgreeTxt(){
                this.isThreeAgreeTxt = false;
            }
        },
        // 数据监听
        watch:{
            // RegisterOne:function(val){
            //     if(val.RegisterCode != '' && val.RegisterMobile != ""){
            //
            //     }
            // }
        },
        mounted(){
            console.log(document.getElementById("ThreeBankNumber"));
            // document.getElementById("ThreeBankNumber").value = 123;
            // console.log($("#ThreeBankNumber").val());
            //在页面刷新时步骤index保存到localStorage里
            window.addEventListener("beforeunload",()=>{
                localStorage.setItem("RegisterIndex",this.index);
            });
            // 根据本地存储里面的步骤一的信息判断是否保留在当前步骤
            if(localStorage.getExpire("RegisterOne")){
                this.index = localStorage.getItem("RegisterIndex");
                // this.index = 1;
            }else{
                this.index = 1;
            }
        }
    }
</script>

<style scoped>
    .wrap{
        overflow: hidden;
    }
    *{
        font-family: "注册页字体";
    }
    /*中心内容*/
    .content{
        width: 1200px;
        height: 713px;
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
    }
    .logo{
        width: 1200px;
        height: 90px;
        margin: 0 auto;
        background: #ffffff;
    }
    .logo .logo{
        width: 61px;
        height: 56px;
        margin-top: 19px;
        float: left;
    }
    .logo .headerTxt{
        float: left;
        font-size:26px;
        font-family: 微软雅黑;
        font-weight:500;
        line-height: 120px;
        margin-left: 10px;
        color:rgba(51,51,51,1);
    }
    .steps{
        border-top: 1px solid #E6E6E6;
    }
    /*步骤条*/
    .conList{
        width: 720px;
        display: flex;
        justify-content: space-around;
        margin: 0 auto -2px;
    }
    .conList div{
        width: 180px;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
    .conListNum{
        display: inline-block;
        width: 24px;
        height: 24px;
        font-size: 18px;
        text-align: center;
        line-height: 24px;
        color: #ffffff;
        border-radius: 12px;
        margin-right: 10px;
        background: #B3B3B3;
    }
    .conListTxt{
        font-size: 17px;
        color: #999999;
        font-weight: 500;
    }
    /*步骤选中*/
    .conListNumS{
        background: #EF3015;
    }
    .conListTxtS{
        color: #333333;
        font-size:17px;
        font-weight: 600;
    }
    /*步骤条下边框*/
    .conListDivBorder{
        border-bottom: 2px solid #EF3015;
    }
    /***************************************************************中心One步骤一*/
    .OnePhone{
        margin-top: 100px;
        margin-left: 430px;

    }
    .OnePhone span,.OneCode span{
        font-size:16px;
        font-weight:500;
        color:rgba(51,51,51,1);
    }
    .OnePhone input,.OneCode input{
        width:260px;
        height:38px;
        font-size:16px;
        text-indent: 10px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(217,217,217,1);
        margin-left: 25px;
    }
    .OneCode{
        margin-left: 430px;
        margin-top: 20px;
    }
    .OneCode input{
        width: 110px;
        display: inline-block;
    }
    .OneCode p{
        display: inline-block;
        width:150px;
        height:38px;
        line-height: 38px;
        text-align: center;
        background:rgba(250,250,250,1);
        border:1px solid rgba(217,217,217,1);
        border-radius:5px;
        margin-left: 10px;
        color: #FA3D0D;
        font-size: 16px;
        cursor: pointer;
    }
    .toTwo{
        width:120px;
        height:40px;
        font-size:20px;
        line-height: 40px;
        text-align: center;
        color: #FFFFFF;
        background:linear-gradient(4deg,rgba(231,38,27,1),rgba(253,64,11,1));
        box-shadow:0px 4px 7px 0px rgba(233,40,26,0.3);
        border-radius:5px;
        margin-left: 504px;
        margin-top: 60px;
        cursor: pointer;
    }

    /***************************************************************中心Two步骤二*/
    .stepsTwo{
        position: relative;
    }
    .TwoLeft, .TwoRight{
        height: 540px;
        font-family: "微软雅黑", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
        display: inline-block;
        margin-top: 40px;
    }
    .TwoLeft{
        width: 55%;
        text-align: right;
        float: left;
    }
    .TwoRight{
        width: 43%;
        text-align: left;
        float: right;
    }
    .TwoDiv{
        height: 60px;
        font-size: 16px;
        line-height: 60px;
        color: #333333;
    }
    .TwoOne{ }
    .TwoTwo{ }
    .TwoThree input, .TwoFour input, .TwoSix input{
        width:260px;
        height:38px;
        font-size: 16px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(217,217,217,1);
        text-indent: 10px;
    }
    .TwoFour{ }
    .TwoFive{
        color: #333333;
        font-weight: 600;
    }
    .TwoSix{ }
    .TwoSub{
        width:120px;
        height:40px;
        text-align: center;
        line-height: 40px;
        color: #ffffff;
        font-size:20px;
        font-weight: 500;
        background:linear-gradient(4deg,rgba(231,38,27,1),rgba(253,64,11,1));
        box-shadow:0px 4px 7px 0px rgba(233,40,26,0.3);
        border-radius:5px;
        margin-top: 42px;
    }
    /*第二步两次密码输入提示*/
    #TwoPasswordHintB{
        position: absolute;
        top: 241px;
        left: 960px;
        color: red;
        font-size: 14px;
        display: block;
    }
    #TwoPasswordHintN{
        position: absolute;
        top: 241px;
        left: 960px;
        color: red;
        font-size: 14px;
        display: none;
    }
    /***************************************************************中心Three步骤三*/
    .stepsThree{
        position: relative;
        padding-top: 40px;
    }
    .ThreeLeft{
        width: 52%;
        float: left;
        text-align: right;
    }
    .ThreeRight{
        width: 46.5%;
        float: right;
    }
    .ThreeP{
        font-size: 16px;
        color: #333333;
        height: 50px;
        line-height: 50px;
        margin-bottom: 20px;
    }
    .ThreeDiv{
        height: 50px;
        line-height: 50px;
        margin-bottom: 20px;
    }
    .ThreeDiv input{
        width:290px;
        height:38px;
        font-size: 16px;
        background:rgba(255,255,255,1);
        border:1px solid rgba(217,217,217,1);
        text-indent: 10px;
    }
    .ThreeDiv .ThreeCode{
        width:170px;
        font-size: 15px;
    }
    .ThreeDiv span{
        display: inline-block;
        width:110px;
        height:38px;
        line-height: 38px;
        font-size:16px;
        color:rgba(250,61,13,1);
        text-align: center;
        background:rgba(250,250,250,1);
        border:1px solid rgba(217,217,217,1);
        border-radius:5px;
        cursor: pointer;
        margin-left: 10px;
    }
    .toFour{
        width:220px;
        height:40px;
        line-height: 40px;
        text-align: center;
        font-size:20px;
        color:rgba(255,255,255,1);
        font-family: "微软雅黑", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
        background:linear-gradient(4deg,rgba(231,38,27,1),rgba(253,64,11,1));
        box-shadow:0px 4px 7px 0px rgba(233,40,26,0.3);
        border-radius:5px;
        cursor: pointer;
    }
    .agreeTxt{
        display: inline-block;
        margin-top: 30px;
        cursor: pointer;
    }
    .agreeTxt span:nth-child(1){
        font-size:12px;
        font-weight:600;
        color:rgba(51,51,51,1);
        font-family: "微软雅黑", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    }
    .agreeTxt span:nth-child(2){
        font-size:12px;
        color: #2A91FE;
        font-family: "微软雅黑", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    }
    /* 第三步弹出支付协议框 */
    #ThreeAgreeTxtB{
        width: 637px;
        height: 482px;
        background: #ffffff;
        border:1px solid #BFBFBF;
        box-shadow:0px 3px 10px 0px #999999;
        position: absolute;
        top: 45px;
        left: 420px;
        z-index: 30;
        display: block;
    }
    #ThreeAgreeTxtN{
        width: 637px;
        height: 482px;
        background: #ffffff;
        border:1px solid #BFBFBF;
        box-shadow:0px 3px 10px 0px #999999;
        position: absolute;
        top: 45px;
        left: 420px;
        z-index: 30;
        display: none;
    }
    /* 协议框第一行 */
    .ThreeAgreeTxtTop{
        font-size:20px;
        font-family:"PingFang-SC-Heavy";
        font-weight:800;
        color: #000000;
        margin: 0 25px;
        line-height:50px;
        border-bottom: 1px solid #D9D9D9;
    }
    /* 协议框中心内容 */
    .ThreeAgreeTxtContentWrap{
        overflow: auto;
        margin: 0 25px;
        height: 340px;
    }
    .ThreeAgreeTxtContent{
        height: 1000px;
    }
    /* 协议框底部确定 */
    .ThreeAgreeTxtBottom{
        background: #EBEBEB;
        width: 637px;
        height: 82px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 0;
    }
    .ThreeAgreeTxtBottom span{
        display: inline-block;
        width: 110px;
        height: 40px;
        line-height: 40px;
        border-radius: 10px;
        background: #00a3d2;
        font-size:20px;
        font-family:"PingFang-SC-Bold";
        font-weight:bold;
        color: #ffffff;
        text-align: center;
        margin: 0 auto;
        cursor: pointer;
    }
    /***************************************************************中心Four步骤四*/
    .FourDiv{
        width:1200px;
        height:200px;
        background:rgba(243,253,246,1);
        border:1px solid rgba(222,243,230,1);
    }
    .FourDivDiv{
        width: 56%;
    }
    .FourOne{
        height: 90px;
        line-height:90px;
        font-size:20px;
        font-weight:600;
        color:rgba(51,51,51,1);
    }
    .FourTwo,.FourThree,.FourFour {
        height:22px;
        line-height:22px;
        font-size:14px;
        font-weight:400;
        color:rgba(51,51,51,1);
    }
    .FourThree{

    }
    .FourFour{

    }




    /*浮动*/
    .left{
        float: left;
    }
    .right{
        float: right;
    }

    .colorRed{
        color: red;
    }
    .colorGreen{
        color: green;
    }
</style>

